<template>
    <div id='' class='metronome'>
        <Modal title="预览" :mask-closable="false" v-model="isShow" width='1600px' :styles="{top: '40px'}" :loading="loading">
            <div style="height:730px;max-height:730px;overflow-y: auto;">
                <Card>
                    <template slot="title">
                        <div class="left_header">
                            <div class="title">高拍仪模式：</div>
                            <div class="type_radio">
                                <RadioGroup v-model="radioType">
                                    <Radio label="图片模式" :disabled="isEdit"></Radio>
                                    <Radio label="PDF模式" :disabled="isEdit"></Radio>
                                </RadioGroup>
                            </div>
                        </div>
                    </template>
                    <template slot="extra">
                        <div class="right_footer">
                            <div class="title">分辨率：</div>
                            <div class="select_fb">
                                <Select v-model="distinguishValue" style="width:200px" @on-change="onFbChange" :disabled="isEdit">
                                    <Option v-for="item in distinguishList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </div>
                        </div>
                    </template>
                    <div class="content">
                        <div class="left">
                            <div class="title">拍照预览</div>
                            <div class="photoView">
                                <img id="metronomeView" :src="camera" alt="主摄像头" style="width:100%;height:100%;">
                            </div>
                            <div class="button_content">
                                <Button type="primary" :loading="isEdit" @click="photograph">拍照</Button>
                                <Button type="primary" :loading="isEdit" @click="closeCamera">关闭摄像头</Button>
                                <Button type="primary" :loading="isEdit" @click="openCamera">启动摄像头</Button>
                                <Button type="primary" :loading="isEdit" @click="trunLeft">左转</Button>
                                <Button type="primary" :loading="isEdit" @click="trunRight">右转</Button>
                            </div>
                        </div>
                        <div class="right">
                            <div class="header">
                                <div class="title">待传列表</div>
                                <div class="btn_class">
                                    <Button type="primary" size="small" :loading="isEdit" ghost @click="clearAll">清空列表</Button>
                                </div>
                            </div>
                            <div class="list_content">
                                <div class="item" v-for="(item,index) in photoList" :key="index">
                                    <Icon class="remove_icon" type="md-close-circle" :size="'24'" @click="removePhoto(item,index)" />
                                    <img :src="httpService + 'zcgl-admin/annex/show?id=' + item.id" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
            <template #footer>
                <Button @click="close" :loading="isEdit">关闭</Button>
                <Button @click="sure" type="primary" style="margin-left:20px" :loading="isEdit">保存</Button>
            </template>
        </Modal>
        <Modal title="编辑PDF名称" :mask-closable="false" v-model="showEdit" width='500px' :styles="{top: '40px'}" :loading="loading">
            <Form :model="formContent" :label-width="100">
                <FormItem label="PDF文件名">
                    <Input v-model="formContent.input" placeholder="请输入" @on-change="editInputChange"></Input>
                </FormItem>
            </Form>
            <span>文件存储地址：{{address}}</span>
            <template #footer>
                <Button @click="closeEdit">关闭</Button>
                <Button @click="editSure" type="primary" style="margin-left:20px">确定</Button>
            </template>
        </Modal>
    </div>
</template>
<script>
import metronomeForJs from './metronome'
import axios from 'axios';
export default {
    name: '',
    props: [''],
    data() {
        return {
            loading: true,
            isShow: false,
            ...metronomeForJs.propData(),
            http: axios,
            dataObj: {}
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this.$api = this.$Api.get(['common:upload'])
        this.loadResolvingPower()
    },
    methods: {
        showHide() {
            this.isShow = !this.isShow;
        },
        sure() {
            this.isEdit = true;
            if (this.radioType == '图片模式') {
                // 将数据返回文件列表
                if (this.photoList.length !== 0) {
                    this.isEdit = false;
                    this.$emit('sureSelectMetronome', this.photoList)
                    this.resetForm()
                    this.showHide()
                } else {
                    this.isEdit = false;
                    return this.$Message.error('请拍照后再次保存！');
                }
            } else {
                if (this.base64Array.length == 0) {
                    this.isEdit = false;
                    return this.$Message.error('请拍照后再次保存！');
                }
                this.showEdit = true;
            }
            return
        },
        editInputChange(event) {
            this.address = `D://${this.formContent.input}.pdf`
        },
        close() {
            this.$emit('closeMetronome', '')
            this.resetForm()
            this.showHide()
        },
        editSure() {
            this.isEdit = true;
            this.composePhotosPDF()
        },
        closeEdit() {
            this.address = ''
            this.formContent.input = '';
            this.showEdit = false
        },
        ...metronomeForJs,
        ...metronomeForJs.apiFunc()
    },
    watch: {}
}
</script>
<style>
.ivu-card-extra {
    top: 8px !important;
}
</style>
<style lang='less' scoped>
@height: 635px;
@heightTitle: 48px;
@heightContent: 530px;
@lineColor: #e8eaec;
.left_header {
    display: flex;
}
.right_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 48px;
}
.content {
    display: flex;
    justify-content: space-between;
    position: relative;
    .left {
        width: 66%;
        height: @height;
        .title {
            padding: 0 15px;
            display: flex;
            align-items: center;
            height: @heightTitle;
        }
        .photoView {
            width: 96%;
            height: @heightContent;
            margin-left: 2%;
            padding: 0 15px;
            border: 1px solid #bbb;
        }
        .button_content {
            display: flex;
            justify-content: center;
            height: 48px;
            align-items: center;
            button:not(:first-child) {
                margin-left: 15px;
            }
        }
    }
    .left::before {
        content: "";
        position: absolute;
        right: 32.5%;
        width: 1px;
        height: 85%;
        top: 7%;
        background: @lineColor;
    }
    .right {
        width: 30%;
        height: @height;
        .header {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            height: @heightTitle;
            align-items: center;
        }
        .list_content {
            height: @heightContent;
            max-height: @heightContent;
            overflow-y: auto;
            .item {
                position: relative;
                display: flex;
                justify-content: center;
                // background-color: black;
                height: 220px;
                align-items: center;
                img {
                    width: 400px;
                    height: 180px;
                }
                .remove_icon {
                    position: absolute;
                    right: 30px;
                    top: 25px;
                }
            }
            .item:not(:last-child)::before {
                bottom: 0;
                left: 4%;
                position: absolute;
                content: "";
                height: 1px;
                width: 92%;
                background-color: @lineColor;
            }
        }
    }
}
</style>